<template>
  <f7-page>
    <f7-navbar title="新增地址" back-link=" "></f7-navbar>

    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-delete
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="handleAdd"
      @delete="handleDelete"
    />
  </f7-page>
</template>

<script>
  import areaList from "../utils/areaList";
  import { addAddress, delAddress, updateAddress } from "../api/find";

  export default {
    name: "add-mall-address",
    data () {
      return {
        areaList,
        searchResult: [],
        addressInfo: {
          name: '',
          tel: '',
          province: '',
          city: '',
          county: '',
          addressDetail: '',
          areaCode: ''
        }
      }
    },
    computed: {
      addressItem() {
        return this.$f7route.context.addressItem;
      }
    },
    mounted() {
      if (this.$f7route.context && this.$f7route.context.type === 'edit') {
        this.addressInfo = {...this.addressItem};
      }
    },
    methods: {
      handleAdd(res) {
        /*name 收货人姓名
          area   省市县
          address 收获地址
          phone 手机号*/
        console.log(res);
        const obj = {
          name: res.name,
          phone: res.tel,
          area: `${res.province},${res.city},${res.county},${res.areaCode}`,
          address: res.addressDetail
        }
        console.log(obj);
        if (this.$f7route.context && this.$f7route.context.type === 'edit') {
          obj.address_id = this.addressItem.id;
          updateAddress(obj).then(() => {
            this.$f7router.back();
          })
        } else {
          addAddress(obj).then(() => {
            this.$f7router.back();
          })
        }
      },
      handleDelete() {
        delAddress({address_id: this.addressItem.id}).then(res => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped>

</style>
